<!DOCTYPE html>
<html>
<head>
  {% from 'macros.html' import svgellipse, svgarrow, stripePattern, button, openImplicationKey %}
  <title>The Computability Menagerie</title>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"/>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
  <script src="{{ url_for('static', filename='jquery-1.4.4.compressed.js') }}"></script>
  <script>
     $PROPERTIES = {{ propertiesMap|tojson|safe }};
     $SHOW_OPEN = '{{ "true" if showOpen else "false" }}';
     $CLASSES = '{{ classesParam }}';
     $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
  </script>
  <script type="text/javascript" src="{{ url_for('static', filename='menagerie.js') }}"></script>
 </head>

 <body>
   <div id="controlPanel">
     <div id="title">
       <span class="appName">The Computability Menagerie</span><span class="credits"><a href="{{ gatewayPage }}#about" target="_blank">about</a></span>
     </div>
     <div id="controls">
       <table>
	       <tr>
	           <td>{{ button("numSelectedLink", '<span id="numSelected">0</span> selected'|safe, disabled=True) }}{% if excludedClasses %}, {{ button("excludedClassesLink", excludedClasses|length ~ " excluded") }} {% endif %}
	           </td>
	           <td>{{ button("showProofs", "View proofs", onclick="showProofs();", disabled=True) }}</td>
	           <td>{{ button("viewSubgraph", "View subgraph", onclick="viewSubgraph();", disabled=True) }}</td>
        	   <td>{{ button("excludeSelected", "Exclude selected", onclick="excludeSelected();", disabled=True) }}</td>
	           <td>{{ button("unselectAll", "Deselect All", onclick="unselectAll();") }}</td>
	           <td><select id="coloringModeSelector" onchange="currentColoring.handleSizeColoringToggle();"><option value="measure">Color by measure</option><option value="category">Color by category</option></select></td>
        	   <td>{{ button("openImplications", "Suppress open implications" if showOpen else "Display open implications" , onclick="toggleOpenImplications();") }}</td>
	           <td>{{ button("toggleHelp", "Help") }}</td>
	           <td>{{ button("toggleKey", "Key") }}</td>
	       </tr>
       </table>
     </div>

     <div id="help" style="display: none;">
	   <p>Classes are color-coded according to their properties and how they relate to other classes. We recommend enabling the key (click "Key"). Here are a few things to try:</p>
        <ul>
            <li>Select/deselect classes by clicking on them.</li>
            <li>When no classes are selected, switch between coloring by "measure" (Hausdorff dimension, packing dimension and Lebesgue measure) and category using the dropdown.</li>
            <li>Double-click on a class to see its properties in detail (opens a new tab).</li>
            <li>When one or more classes are selected, the graph is recolored to indicate how other classes relate to the selected classes.</li>
            <li>Select a pair of classes, then click "View proofs" to see the implications between them (opens a new tab/window).</li>
            <li>Select a group of classes, then click "View subgraph" to generate a subgraph consisting only of the selected classes (opens a new tab/window).</li>
            <li>Select a group of classes, then click "Exclude selected" to remove those classes from the graph.</li>
            <li>Bookmark the page to save your settings.</li>
        </ul>
        <p>{{ button("dismissHelp", "Dismiss this window") }}</p>
     </div>

     {% if excludedClasses %}
     <div id="excludedClasses" class="classList" style="display: none;">
       <div style="margin-bottom: 10px;">{{ button("restoreAll", "Restore all excluded classes", onclick="restoreAll();")}}</div>
       <ul>
       {% for cls in excludedClasses %}
       <li><input type="checkbox" class="excludedClassCheckbox" onclick="enableRestoreChecked();" value="{{cls.name}}"/> {{ cls|decorate|safe }}</li>
       {% endfor %}
       </ul>
       <br/>
        {{ button("restoreChecked", "Restore only selected classes", onclick="restoreChecked();", disabled=True)}}

     </div>
     {% endif %}

     <div id="selectedClasses" class="classList" style="display: none;">
       Selected classes
     </div>

    </div>

    <div id="nodeData" style="display: none;">
    </div>

    <div id="keys" style="display: none;">
    <div id="recoloringKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgarrow("black", "highlightArrow") }}</td><td> Nonstrict implication </td></tr>
	  {{ openImplicationKey(showOpen, gatewayPage) }}
	  <tr><td>{{ svgellipse("selected") }}</td><td>Selected</td></tr>
	  <tr><td>{{ svgellipse("above") }}</td><td>Superclass of each of <br/>the selected classes</td></tr>
	  <tr><td>{{ svgellipse("below") }}</td><td>Subclass of each of<br/> the selected classes</td></tr>
	  <tr><td>{{ svgellipse("comp") }}</td><td>Comparable to each of <br/>the selected classes</td></tr>
	  <tr><td>{{ svgellipse("inc") }}</td><td>Incomparable to some <br/>selected class</td></tr>
	</table>
	<a href="{{ gatewayPage }}#stripes" target="_blank">Stripes</a> indicate one or more unknown implications. Colors alternate between the possibilities.
    </div>
    <div id="measureKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgarrow("black", "highlightArrow") }}</td><td> Nonstrict implication </td></tr>
	  {{ openImplicationKey(showOpen, gatewayPage) }}
	  <tr><td>{{ svgellipse("level4") }}</td><td>Measure 1</td></tr>
	  <tr><td>{{ svgellipse("level3") }}</td><td>Hausdorff dimension 1, <br/>measure 0</td></tr>
	  <tr><td>{{ svgellipse("level2") }}</td><td>Packing dimension 1, <br/>Hausdorff dimension 0</td></tr>
	  <tr><td>{{ svgellipse("level1") }}</td><td>Uncountable, <br/>packing dimension 0</td></tr>
	  <tr><td>{{ svgellipse("level0") }}</td><td>Countable</td></tr>
	</table>
	<a href="{{ gatewayPage }}#stripes" target="_blank">Stripes</a> indicate unknown measure information. Colors alternate between the possible extremes.
    </div>
    <div id="categoryKey" class="key" style="display: none;">
	<table>
	  <tr><td>{{ svgarrow("black", "highlightArrow") }}</td><td> Nonstrict implication </td></tr>
	  {{ openImplicationKey(showOpen, gatewayPage) }}
	  <tr><td>{{ svgellipse("uncountableComeager") }}</td><td>Comeager</td></tr>
	  <tr><td>{{ svgellipse("uncountableMeager") }}</td><td>Uncountable and meager</td></tr>
	  <tr><td>{{ svgellipse("countable") }}</td><td>Countable</td></tr>
	</table>
	<a href="{{ gatewayPage }}#stripes" target="_blank">Stripes</a> indicate unknown category information. Colors alternate between the possible extremes.
    </div>
  </div>

	<div id="graph" style="width:{{ graph.attributes.width.value}}">
	  {{ graph.toxml() | safe }}
	</div>

  <svg height="0pt" width="0pt" id="paintServers" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <defs>
	{{ stripePattern("eqAbove", "above", "selected") }}
	{{ stripePattern("eqBelow", "below", "selected") }}
	{{ stripePattern("aboveInc", "above", "inc") }}
	{{ stripePattern("belowInc", "below", "inc") }}
	{{ stripePattern("eqInc", "selected", "inc") }}
	{{ stripePattern("eqComp", "selected", "comp") }}
	{{ stripePattern("aboveComp", "above", "comp") }}
	{{ stripePattern("belowComp", "below", "comp") }}
	{{ stripePattern("compInc", "inc", "comp") }}

	{{ stripePattern("uncountableUnknown", "uncountableMeager", "uncountableComeager") }}
	{{ stripePattern("unknownMeager", "countable", "uncountableMeager") }}
	{{ stripePattern("unknownUnknown", "countable", "uncountableComeager") }}

	{% for smallest in range(4) %}{% for largest in range(smallest+1, 5) %}
	{{ stripePattern("level" ~ smallest ~ "-" ~ largest, "level"~smallest, "level"~largest)}}{% endfor %}{% endfor %}
      </defs>
    </g>
  </svg>
</body>
</html>
